<template>
  <div>
  <div class="csdn-article">
    <div class="article-header">
      <h1 class="article-title">记事本</h1>
    </div>
    <div class="article-content" v-for="article in articles" :key="article.title" @click="showArticleContent(article)">
      <h3>{{ article.title }}</h3>
      <p>{{ article.content }}</p>
    </div>
    <div class="article-footer"></div>
  </div>

  <div class="popup" v-if="showArticlePopup">
    <div class="popup-content">
      <h1 class="popup-title">{{ currentArticle.title }}</h1>
      <hr>
      <p class="popup-content">{{ currentArticle.content }}</p>
      <el-button class="edit-button" type="primary" @click="editArticle">编辑</el-button>
      <el-button type="danger"  @click="deleleArticle(currentArticle)">删除</el-button>
    </div>
    <el-button class="close-button" icon="el-icon-close" @click="closePopup"></el-button>
  </div>
  </div>
</template>

<script>


export default {
  
  data() {
    return {
      articles: [
        {
          id:1,
          title: 'CSDN文章展示页面',
          content: '这是一篇类似CSDN的文章展示页面示例。这是一篇类似CSDN的文章展示页面示例。这是一篇类似CSDN的文章展示页面示例。这是一篇类似CSDN的文章展示页面示例。这是一篇类似CSDN的文章展示页面示例。这是一篇类似CSDN的文章展示页面示例。这是一篇类似CSDN的文章展示页面示例。这是一篇类似CSDN的文章展示页面示例。',
        },
        {
          id:2,
          title: '第二篇文章',
          content: '这是第二篇文章的内容。',
        },
        // 可以继续添加更多文章...
      ],
      currentArticle: {}, // 当前展示的文章
      showArticlePopup: false, // 弹出页面的显示与隐藏
    }
  },
  methods: {
    fillAll() {
      this.$axios
        .get("http://localhost:8181/articleForm/fillAll/")
        .then(response => {
          //console.log(response.data.data);
          this.articles = response.data.data; // 将获取到的文章赋值给currentArticle
        })
        .catch(error => {
          console.error(error);
        });
    },
    showArticleContent(article) {
      this.currentArticle = article;
      //console.log("Clicked article:", article);
      this.showArticlePopup = true;
    },
    closePopup() {
    this.showArticlePopup = false;
    },
    editArticle() {
    // 传递当前文章的标题和内容到编辑页面
      this.$router.push({
        name: 'EditArticle',
        query: {
          id: this.currentArticle.id,
          title: this.currentArticle.title,
          content: this.currentArticle.content
        }
      });
    },
    deleleArticle(row){
      // 执行删除操作
      //console.log(row);
      this.$axios.delete(`http://localhost:8181/articleForm/delete/${row.id}`)
      .then(response => {
        // 处理删除成功的逻辑
        //console.log(response.data);
        this.$message({
          showClose: true,
          message: '删除成功',
          type: 'success'
        });
        // 刷新页面
        window.location.reload();
      })
      .catch(error => {
        // 处理删除失败的逻辑
        console.error(error);
      });
    },
  },
  
  mounted() {
    this.fillAll();
  },
}
</script>

<style scoped>
.article-content {
  margin-bottom: 20px;
  line-height: 1.5; /* 调整行高，适应两行显示 */
  max-height: 6.5em; /* 计算 2 行内容的高度 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
  white-space:normal; /* 保持文本在一行显示 */
  display: -webkit-box; /* 设置为弹性盒子 */
  -webkit-line-clamp: 3; /* 显示的行数 */
  -webkit-box-orient: vertical; /* 纵向排列 */
  border: 1px solid #ccc; /* 添加边框 */
  padding: 10px; /* 添加内边距，左右各为 20px */
  margin: 20px 200px; /* 添加外边距，上下左右各为 10px */
}
.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background-color: white;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 80%;
  height: 80vh;
  overflow-y: auto;
  padding: 20px 40px 20px 20px;
}
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
}
</style>